<template>
    <el-drawer v-model="visible" :with-header="false" :size="1000" destroy-on-close @closed="$emit('closed')">
        <el-container v-loading="loading">
            <el-main style="padding:20px 20px 20px 20px" class="">
                <el-container class="is-vertical">
                    <sc-title title="机构详情"></sc-title>
                    <div>
                        <el-tabs v-model="activeName" @tab-click="tabClickFun">
                            <el-tab-pane label="基本信息" name="first">
                                <el-form ref="form" label-width="120px" class="formshows" label-position="right" size="small">
                                    <div class="info">
                                        <el-row>
                                            <el-col :span="24">
                                                <el-row>
                                                    <el-col :span="12">
                                                        <el-form-item label="机构名称:">{{info.name}}</el-form-item>
                                                        <el-form-item label="机构状态:">
															<el-tag size="mini" v-if="info.status && info.status.value == 0" type="danger">{{ info.status.name }}</el-tag>
                                                            <el-tag size="mini" v-if="info.status && info.status.value == 1" type="success">{{ info.status.name }}</el-tag>
														</el-form-item>
                                                        <el-form-item label="30分钟课时:">{{info.classHour30}}</el-form-item>
                                                        <el-form-item label="负责人姓名:">{{info.chargeName}}</el-form-item>
                                                        <el-form-item label="管理员姓名:">{{info.manager}}</el-form-item>
                                                        <el-form-item label="推荐人姓名:">{{info.promoterName}}</el-form-item>
                                                        <el-form-item label="合伙人剩余名额:" v-if="info?.level?.id == 11">
                                                            <span style="color: red;">{{info.partnerBalance}}</span>
                                                        </el-form-item>
                                                        <el-form-item label="负责人身份证号:">{{info.chargeIdCard}}</el-form-item>
                                                        <el-form-item label="管理员身份证号:">{{info.managerIdCard}}</el-form-item>
                                                        <el-form-item label="开户人姓名:">{{info?.financeAccount?.bankUserName || ''}}</el-form-item>
                                                        <el-form-item label="银行卡号:">{{info?.financeAccount?.bankCode || ''}}</el-form-item>
                                                    </el-col>
                                                    <el-col :span="12">
                                                        <el-form-item label="机构等级:">{{info.level && info.level.name || ''}}</el-form-item>
                                                        <el-form-item label="归属机构:">{{ info?.parent?.name || ''}}</el-form-item>
                                                        <el-form-item label="60分钟课时:">{{info.classHour60}}</el-form-item>
                                                        <el-form-item label="收费金额:">{{info.amount || '0'}}元</el-form-item>
                                                        <el-form-item label="所在地区:">{{info.region}}{{info.address}}</el-form-item>
                                                        <el-form-item label="负责人手机号:">{{info.chargeMobile}}</el-form-item>
                                                        <el-form-item label="管理员手机号:">{{info.managerMobile}}</el-form-item>
                                                        <el-form-item label="推荐人手机号:">{{info.promoterMobile}}</el-form-item>
                                                        <el-form-item label="开户行全称:">{{info?.financeAccount?.bankFullName || ''}}</el-form-item>
                                                    </el-col>
                                                </el-row>
                                            </el-col>
                                        </el-row>
                                    </div>
                                    <div class="info">
                                        <div class="title">分享二维码</div>
                                        <el-row>
                                            <el-col :span="24">
                                                <el-form-item label="二维码:">
                                                    <template v-if="info?.shareCode?.classHourCode">
                                                        <el-image contain style="width: 165px; height: 174px" class="image" :src="info.shareCode.classHourCode" fit="cover" :preview-src-list="[info.shareCode.classHourCode]" hide-on-click-modal append-to-body :z-index="3500">
                                                        </el-image>    
                                                    </template>
                                                    <template v-else>
                                                        <el-button type="primary" size="mini" @click="shareQrcodeFun" :loading="qrcodeLoading">生成</el-button>
                                                    </template>
												</el-form-item>
                                            </el-col>
                                        </el-row>
                                    </div>
                                </el-form>
                            </el-tab-pane>

                            <el-tab-pane label="附件信息" name="second">
                                <el-form label-width="110px" class="formshows" label-position="right" size="small">
                                    <el-row>
                                        <el-col :span="12">
                                            <div class="info">
                                                <div class="title">本人照片</div>
                                                <div class="sc-upload-list" v-if="info.image">
                                                    <div class="sc-upload-item">
                                                        <el-image contain style="width: 165px; height: 174px" class="image" :src="info.image.url" fit="cover" :preview-src-list="[info.image.url]" hide-on-click-modal append-to-body :z-index="3500">
                                                            <template #placeholder>
                                                                <div class="image-slot">
                                                                    <i class="el-icon-more"></i>
                                                                </div>
                                                            </template>
                                                        </el-image>
                                                    </div>
                                                </div>
                                                <el-empty v-else description="暂无本人照片" :image-size="40" style="padding:0px;"></el-empty>
                                            </div>
                                            <div class="info">
                                                <div class="title">转账记录</div>
                                                <div class="sc-upload-list" v-if="info.paymentImg">
                                                    <div class="sc-upload-item">
                                                        <el-image contain style="width: 165px; height: 174px" class="image" :src="info.paymentImg.url" fit="cover" :preview-src-list="[info.paymentImg.url]" hide-on-click-modal append-to-body :z-index="3500">
                                                            <template #placeholder>
                                                                <div class="image-slot">
                                                                    <i class="el-icon-more"></i>
                                                                </div>
                                                            </template>
                                                        </el-image>
                                                    </div>
                                                </div>
                                                <el-empty v-else description="暂无转账记录" :image-size="40" style="padding:0px;"></el-empty>
                                            </div>
                                        </el-col>
                                        <el-col :span="12">
                                            <div class="info">
                                                <div class="title">推荐人合影</div>
                                                <div class="sc-upload-list" v-if="info.promoterImg">
                                                    <div class="sc-upload-item">
                                                        <el-image contain style="width: 165px; height: 174px" class="image" :src="info.promoterImg.url" fit="cover" :preview-src-list="[info.promoterImg.url]" hide-on-click-modal append-to-body :z-index="3500">
                                                            <template #placeholder>
                                                                <div class="image-slot">
                                                                    <i class="el-icon-more"></i>
                                                                </div>
                                                            </template>
                                                        </el-image>
                                                    </div>
                                                </div>
                                                <el-empty v-else description="暂无推荐人合影" :image-size="40" style="padding:0px;"></el-empty>
                                            </div>
                                            <div class="info">
                                                <div class="title">合同照片</div>
                                                <div class="sc-upload-list" v-if="info.contractImg">
                                                    <div class="sc-upload-item">
                                                        <el-image contain style="width: 165px; height: 174px" class="image" :src="info.contractImg.url" fit="cover" :preview-src-list="[info.contractImg.url]" hide-on-click-modal append-to-body :z-index="3500">
                                                            <template #placeholder>
                                                                <div class="image-slot">
                                                                    <i class="el-icon-more"></i>
                                                                </div>
                                                            </template>
                                                        </el-image>
                                                    </div>
                                                </div>
                                                <el-empty v-else description="暂无合同照片" :image-size="40" style="padding:0px;"></el-empty>
                                            </div>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="24">
                                            <div class="info">
                                                <div class="title">身份证照片</div>
                                                <div class="sc-upload-list" v-if="info.idCardImg && info.idCardImg.length > 0">
                                                    <ul>
                                                        <li v-for="(file, index) in info.idCardImg" :key="index">
                                                            <div class="sc-upload-item">
                                                                <el-image class="image" :src="file.url" fit="cover" :preview-src-list="previewIdCardImgs" hide-on-click-modal append-to-body :z-index="3500">
                                                                    <template #placeholder>
                                                                        <div class="image-slot">
                                                                            <i class="el-icon-more"></i>
                                                                        </div>
                                                                    </template>
                                                                </el-image>
                                                            </div>
                                                        </li>
                                                    </ul>
                                                </div>
                                                <el-empty v-else description="暂无身份证照片" :image-size="40" style="padding:0px;"></el-empty>
                                            </div>
                                        </el-col>
                                    </el-row>
                                </el-form>
                            </el-tab-pane>

                            <el-tab-pane label="开通教练" name="third" v-if="permission.teacher">
                                <teahcerTable :agent="info" v-if="activeName == 'third'"></teahcerTable>
                            </el-tab-pane>

                            <el-tab-pane label="课时记录" name="fourth">
                                <classHourLog :agentId="infoId" v-if="activeName == 'fourth'"></classHourLog>   
                            </el-tab-pane>
                           
                        </el-tabs>
                    </div>
                </el-container>
            </el-main>
            <el-footer>
                <el-button @click="visible=false">关闭</el-button>
            </el-footer>
        </el-container>
    </el-drawer>

</template>

<script>
import { rolePermission } from '@/utils/permission'
import teahcerTable from './components/teacherTable.vue'
import classHourLog from '../classHour/components/logTable.vue'
export default {
    components: {
        teahcerTable,
        classHourLog
    },
    data() {
        return {
            visible: false,
            loading: false,
            qrcodeLoading: false,
            dialog: {
                audit: false
            },
            info: {},
            infoId: null,
            activeName: 'first',
            previewIdCardImgs: [],
            permission: {
				teacher: rolePermission('agent-teacher-view'),
			},
        }
    },
    mounted() {
     
    },
    methods: {
        open(id, activeName) {
            this.activeName = activeName || 'first'
            this.visible = true
            this.infoId = id
            this.getData(id)
        },
        async getData(id) {
            this.loading = true
            await this.$API.agent.action.get({id: id}).then((res) => {
                this.info = res.data

                if(this.info.province && !this.info.city && !this.info.county) {
                    this.info.region = this.info.province.name
                }else if (this.info.province.id == this.info.city.id) {
                    this.info.region = this.info.province.name + this.info.county.name
                }else{
                    this.info.region = this.info.province.name + this.info.city.name + this.info.county.name
                }

                if (this.info.idCardImg) {
                    this.info.idCardImg.forEach(item => {
                        item.path && this.previewIdCardImgs.push(item.url)
                    })
                }

                this.loading = false
            }, () => {
                this.loading = false
            })
        },
        async shareQrcodeFun() {
            this.qrcodeLoading = true
            await this.$API.agent.createShareQrcode.post({id: this.infoId}).then((res) => {
                this.qrcodeLoading = true
                if (res.error == 0) {
                    this.getData(this.infoId)
                }
            }).finally(() => {
                this.qrcodeLoading = false
            })
        },
        handleSuccess() {
            this.getData(this.infoId)
        }
    }
}
</script>

<style scoped>
.tcontainer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
}
.title {
    font-size: 14px;
    padding-left: 6px;
    font-weight: 500;
    padding-bottom: 20px;
}
.info {
    padding-bottom: 10px;
    margin-bottom: 10px;
}
.info:last-child {
    border: none;
    padding-bottom: 0;
    margin-bottom: 0;
}
[data-theme="dark"] .info {
    border-color: #434343;
}
:deep(.el-form-item__content) {
    font-size: 12px !important;
}
:deep(.el-image-viewer__close) {
    background-color: unset;
}
.el-form-item__label {
    text-align: justify;
}
</style>
